<template>
	<div>
		<!--  
			@save: 按下 ctrl + s 时触发  
			@change: 当值发生改变时 触发
		-->
		<mavon-editor @save="saveDoc" @change="updateDoc" 
			:ishljs = "true" v-model="content" ref="md" 
			:toolbars="toolbars">
		</mavon-editor>
	</div>
</template>

<script>
	import {mavonEditor} from "mavon-editor";
	import "mavon-editor/dist/css/index.css";
	export default {
		name: 'editor2',
		components: {mavonEditor},
		data() {return {
			toolbars:{
				bold: true, // 粗体
				italic: true, // 斜体
				header: true, // 标题
				underline: false, // 下划线
				strikethrough: false, // 中划线
				mark: false, // 标记
				superscript: true, // 上角标
				subscript: true, // 下角标
				quote: true, // 引用
				ol: true, // 有序列表
				ul: true, // 无序列表
				link: true, // 链接
				imagelink: true, // 图片链接
				code: true, // code
				table: false, // 表格
				fullscreen: true, // 全屏编辑
				readmodel: true, // 沉浸式阅读
				htmlcode: true, // 展示html源码
				help: true, // 帮助
				undo: true, // 上一步
				redo: true, // 下一步
				trash: true, // 清空
				save: true, // 保存（触发events中的save事件）
				navigation: true, // 导航目录
				alignleft: false, // 左对齐
				aligncenter: false, // 居中
				alignright: false, // 右对齐
				subfield: true, // 单双栏模式
				preview: true, // 预览
			}
		}},
		props:{
			content:{
				type: String,
				required: true
			}
		},
		mounted() {
			
		},
		methods: {
			updateDoc(markdown1) {this.$emit("markdown1",markdown1)},
			saveDoc(markdown2) {
				this.$emit("markdown2",markdown2)
				console.log("html_content",this.$refs.md.d_render)
				console.log("md_content",this.$refs.md.d_value)
			},
			
		}
	}
</script>

<style>
	.v-note-help-wrapper,.v-note-wrapper.fullscreen{z-index: 9999999!important;}
</style>
